<!-- 提现 -->
<template>
  <publicPage>
    <view class="withdrawPage">
      <u-navbar
        title="云豆提现"
        bgColor="inherit"
        autoBack
        leftIconColor="#FFFFFF"
        :titleStyle="{ color: '#FFFFFF' }"
      />

      <view class="headBox" :style="headStyle">
        <view class="py-12 px-16">可提现金额（元）</view>
        <view class="px-16">
          <text>￥</text>
          <text class="fz-24">{{userInfo.balance}}</text>
        </view>
      </view>

      <view class="bodyBox linh-45">
        <view class="linh-40 px-15">提现金额</view>
        <view class="disFlxJS borderBtm mx-15">
          <view class="disFlxAC" style="flex:1;">
            <view class="fz-24 pr-5">￥</view>
            <u--input
                type="digit"
                v-model="postParams.amount"
                disabledColor="#FFFFFF"
                placeholder="请输入提现金额"
                border="none"
                fontSize="18"
                :maxLength="10"
                clearable
            ></u--input>
          </view>
          <view class="color8 pl-10" style="flex-shrink: 0;" @click="postParams.amount = userInfo.balance">全部提现</view>
        </view>
        <view class="disFlxJS linh-50 mx-15">
          <view>提现至</view>
          <view class="disFlxAC">
            <u-image
              src="https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/image220701%283%29.png"
              width="30rpx"
              height="30rpx"
            />
            <text class="pl-6">微信</text>
          </view>
        </view>
        <view class="mx-16 py-30">
          <u-button
            type="primary"
            text="申请提现"
            :customStyle="{
              fontSize: '32rpx',
              borderRadius: '20rpx',
              height: '88rpx',
            }"
            :throttleTime="500"
            @click="withdrawal"
          ></u-button>
        </view>
      </view>
    </view>
  </publicPage>
</template>

<script>
import playApi from "@/api/play.js";
export default {
  computed: {
    // 页面背景颜色样式
    headStyle() {
      return `padding-top: ${this.$store.state.deviceInfo.navbarHeight}px;`;
    },
    // 用户信息
    userInfo() {
      return this.$store.state.userInfo;
    }
  },
  data() {
    return {
      postParams: {
        amount: ""
      }
    };
  },
  methods: {
    // 提现
    withdrawal(){
      const that = this
      if(that.postParams.amount > that.userInfo.balance){
        uni.showToast({
          title: '不能大于可提现余额',
          icon: 'none'
        })
        return
      }
      playApi.withdrawal(that.postParams).then((res) => {
        uni.showToast({
          title: '提现成功,请等待审核',
          icon: 'none',
          complete: () => {
            that.$store.dispatch("getUserInfo");
            setTimeout(() => {
              that.goBack()
            }, 2000);
          }
        })
      }).catch((err) => {
        uni.showToast({
          title: '提现失败,请重试',
          icon: 'none'
        })
      });
    }
  },
};
</script>
<style lang='scss' scoped>
.withdrawPage {
  .headBox {
    color: #ffffff;
    background-image: linear-gradient(
      to bottom right,
      #2dbcbe,
      #2dbcbe,
      #20d19a
    );
    background-repeat: no-repeat;
    padding-bottom: 120rpx;
  }
  .borderBtm {
    border-bottom: solid 1px #dddddd;
  }
  .bodyBox {
    position: relative;
    top: -40rpx;
    margin: 0 28rpx;
    border-radius: 20rpx;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    background-color: #ffffff;
  }
}
</style>